<template>
	<view>
		<view class="profile">
			<view class="xinxi">
				<view class="xi">
					<view class="ji"></view>
					<view class="xin-text">基础信息</view>
				</view>
			</view>
			<view class="biao">
				<view class="input">
					<view>姓名</view>
					<input type="text" value="" v-model="getData.name" placeholder="顾客姓名" />
				</view>
				<view class="inputs">
					<view>性别</view>
					<label class="radio">
						<radio-group name="" @change='change'>
							<radio value="男" style="transform: scale(0.5);" /><text>男</text>
							<radio value="女" style="transform: scale(0.5); " /><text>女</text>
						</radio-group>

					</label>
				</view>
			</view>
			<view class="biao">
				<view class="input">
					<view>年龄</view>
					<input type="text" value="" v-model="getData.age" placeholder="选择年龄" />
				</view>
				<view class="inputs">
					<view>生日</view>
					<input type="text" value="" v-model="getData.day" placeholder="选择生日" />
				</view>
			</view>
			<view class="biao">
				<view class="input">
					<view>职业</view>
					<input type="text" value="" v-model="getData.occupation" placeholder="填写职业" />
				</view>
				<view class="inputs">
					<view>喜好</view>
					<input type="text" value="" v-model="getData.hobby" placeholder="填写喜好" />
				</view>
			</view>
			<view class="biao">
				<view class="input">
					<view>电话</view>
					<input type="text" value="" v-model="getData.phone" placeholder="填写电话" />
				</view>
				<view class="inputs">
					<view>邮箱</view>
					<input type="text" value="" v-model="getData.mailbox" placeholder="填写邮箱" />
				</view>
			</view>
			<view class="shen">
				<view>身份证</view>
				<input type="text" value="" v-model="getData.ID" placeholder="填写身份证件号码" />
			</view>
			<view class="shen">
				<view>联系地址</view>
				<input type="text" value="" v-model="getData.address" placeholder="填写常住家庭地址" />
			</view>
			<view class="shen">
				<view>入职时间</view>
				<input type="text" value="" v-model="getData.data" placeholder="填写来店工作时间 例:2020-06-06" />
			</view>
			<view class="border">
				<view>备注</view>
				<u-input v-model="getData.value" :type="type" :border="false" :height="height" :auto-height="autoHeight"
				 placeholder="请填写备注不超过80字" :maxlength="80" />
			</view>
		</view>
		<view class="btn">
			<view class="bao">保存档案</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'textarea',
				height: 100,
				autoHeight: true,
				getData: {
					name: '',
					age: '',
					day: '',
					occupation: '',
					hobby: '',
					phone: '',
					mailbox: '',
					ID:'',
					address:'',
					data:''
				},
				rules: {
					name: {
						rule: /[\u4e00-\u9fa5]/,
						msg: '请填写名称',
						required: true,
						trigger: 'blur'
					},
					age: {
						rule: /^((1[0-5])|[1-9])?\d$/,
						msg: '选择年龄',

					},
					day: {
						rule: /^(19|bai20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/,
						msg: '选择生日',

					},
					occupation: {
						rule: /[\u4e00-\u9fa5]/,
						msg: '填写职业',

					},
					hobby: {
						rule: /[\u4e00-\u9fa5]/,
						msg: '填写喜好',

					},
					phone: {
						rule: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
						msg: '填写电话',

					},
					mailbox: {
						rule: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
						msg: '填写邮箱',

					},

				}
			}
		},
		methods: {
			change() {

			},
			submit() {
				let data = this.getData;
				console.log(JSON.stringify(data))
			},

		}
	}
</script>

<style lang="scss">
	.btn{
		padding: 70rpx 25rpx;
		background-color: #fff;
		
		.bao{
			width: 100%;
			height:90rpx;
			line-height: 90rpx;
			background-color: #00c6c2;
			text-align: center;		
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	.profile {
		padding: 0 25rpx;
		margin: 20rpx 0 20rpx 0;
		background-color: #fff;
		border-bottom:10rpx solid #F3F3F3;

		.xinxi {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E2E2E2;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.xi {
				display: flex;
				align-items: center;
			}

			.ji {
				width: 4rpx;
				height: 31rpx;
				background-color: #00c6c2;
			}

			.xin-text {
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #000000;
				margin-left: 20rpx;
			}


		}

		.shen {
			height: 105rpx;
			line-height: 105rpx;
			display: flex;
			align-items: center;

			view {
				width: 150rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}

			input {
				height: 100%;
				padding-left: 20rpx;
			}
		}

		.biao {
			width: 100%;
			border-bottom: 1rpx solid #E2E2E2;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input {
				width: 50%;
				height: 109rpx;
				line-height: 109rpx;
				border-right: 1rpx solid #E2E2E2;
				display: flex;
				align-items: center;

				view {
					width: 80rpx;
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #000000;
				}

				input {
					height: 100%;
				}
			}

			.inputs {
				width: 50%;
				padding-left: 20rpx;
				display: flex;
				align-items: center;

				view {
					width: 80rpx;
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #000000;
				}
			}
		}

		.border {
			padding: 20rpx 0;
			display: flex;

			

			u-input {
				display: inline-block;
				height: 130rpx;
				width: 90%;
				margin-left: 10rpx;
			}
		}

	}
</style>
